<template>
  <el-card class="login-container">
    <!-- 登录/注册框 -->

    <el-form
      :model="ruleForm"
      ref="ruleForm"
      v-if="!isPwd"
      :rules="isLogin ? loginRules : registerRules"
      label-width="0px"
      class="login-form"
    >
      <h3 class="login-title">{{ LoginStatus ? '登录' : '注册' }}</h3>
      <el-form-item prop="username">
        <el-input
          class="custom-input"
          v-model="ruleForm.username"
          placeholder="请输入用户名"
        >
          <div slot="prefix">
            <svg
              t="1687856604893"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2995"
              width="20px"
              height="20px"
            >
              <path
                d="M928 893.5C928 724 808.2 580 642.8 529.3c64.3-42.3 106.9-114.7 106.9-196.9C749.7 202 643.1 96 512 96S274.3 202 274.3 332.3c0 82.2 42.6 154.6 106.9 196.9C215.8 580 96 723.9 96 893.5V928h832v-34-0.5z"
                fill="#b9b9b9"
                p-id="2996"
              ></path>
            </svg></div
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          class="custom-input"
          v-model="ruleForm.password"
          @keyup.enter.native="LoginOrRegister"
          show-password
          placeholder="请输入密码"
        >
          <div slot="prefix">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M23 8.5C23 12.6421 19.6421 16 15.5 16C14.0696 16 12.7327 15.5996 11.5953 14.9047L11 15.5V19H7V23H2V19L8.91221 12.0878C8.33057 11.0221 8 9.79964 8 8.5C8 4.35786 11.3579 1 15.5 1C19.6421 1 23 4.35786 23 8.5ZM19 7.5C19 6.11929 17.8807 5 16.5 5C15.1193 5 14 6.11929 14 7.5C14 8.88071 15.1193 10 16.5 10C17.8807 10 19 8.88071 19 7.5Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </el-input>
      </el-form-item>
      <el-form-item prop="RealPassword" v-show="!LoginStatus">
        <el-input
          v-model="ruleForm.RealPassword"
          class="custom-input"
          show-password
          placeholder="请重新输入密码"
        >
          <div slot="prefix">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M23 8.5C23 12.6421 19.6421 16 15.5 16C14.0696 16 12.7327 15.5996 11.5953 14.9047L11 15.5V19H7V23H2V19L8.91221 12.0878C8.33057 11.0221 8 9.79964 8 8.5C8 4.35786 11.3579 1 15.5 1C19.6421 1 23 4.35786 23 8.5ZM19 7.5C19 6.11929 17.8807 5 16.5 5C15.1193 5 14 6.11929 14 7.5C14 8.88071 15.1193 10 16.5 10C17.8807 10 19 8.88071 19 7.5Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </el-input>
      </el-form-item>
      <el-form-item
        v-if="openingModuleList.find(item => item == 'recommend')"
        prop="referral_by_code"
        v-show="!LoginStatus"
      >
        <el-input
          v-model="ruleForm.referral_by_code"
          class="custom-input"
          placeholder="请输入推荐码(可选)"
        >
          <div slot="prefix">
            <svg
              t="1687860148259"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11838"
              width="20"
              height="20"
            >
              <path
                d="M445.778 512.419c0 17.215 7.092 34.333 19.262 46.502 12.176 12.178 29.292 19.265 46.502 19.265 17.218 0 34.335-7.087 46.505-19.265 12.178-12.169 19.26-29.287 19.26-46.502 0-17.216-7.082-34.326-19.26-46.502-12.17-12.171-29.287-19.264-46.505-19.264-17.209 0-34.326 7.092-46.502 19.264C452.871 478.093 445.778 495.203 445.778 512.419L445.778 512.419zM445.778 512.419"
                fill="#b9b9b9"
                p-id="11839"
              ></path>
              <path
                d="M511.546 389.427c-15.761 0-31.54 0.288-47.247 0.858 42.403-63.424 87.635-117.846 131.079-157.219 54.588-49.472 94.005-62.967 108.851-54.394 14.917 8.613 22.919 49.722 7.164 122.159-3.318 15.254 6.361 30.308 21.614 33.622 15.251 3.323 30.311-6.357 33.62-21.61 26.098-119.998-4.16-165.82-34.135-183.125-85.621-49.431-230.136 91.238-338.303 265.045-17.656 1.634-35.054 3.646-52.069 6.021-13.476-35.485-23.83-69.416-30.577-100.648-15.55-72.01-7.531-112.892 7.322-121.463 7.26-4.189 20.019-2.828 35.924 3.843 20.831 8.735 45.989 26.164 72.761 50.402 11.57 10.473 29.438 9.588 39.919-1.982 10.477-11.569 9.593-29.446-1.979-39.917-90.443-81.901-145.024-78.539-174.886-61.299-29.889 17.258-60.108 62.902-34.307 182.354 6.646 30.784 16.486 63.874 29.119 98.334-123.924 25.023-215.76 72.187-215.76 140.195 0 34.61 24.555 83.724 141.524 121.125 2.863 0.917 5.758 1.354 8.613 1.354 11.96 0 23.074-7.662 26.915-19.665 4.754-14.868-3.445-30.775-18.315-35.528-70.604-22.581-102.209-50.063-102.209-67.286 0-17.15 31.394-44.533 101.529-67.073 23.98-7.704 50.534-14.303 79.047-19.725 6.927 16.048 14.392 32.279 22.341 48.608-34.545 70.926-59.789 140.05-72.803 200.334-25.801 119.449 4.418 165.095 34.307 182.35 9.971 5.763 22.702 9.969 38.614 9.969 31.616-0.002 75.779-16.629 135.745-70.786 11.584-10.46 12.493-28.338 2.034-39.921-10.467-11.583-28.338-12.49-39.923-2.03-54.258 49.006-93.446 62.334-108.209 53.814-7.269-4.195-12.47-15.944-14.639-33.092-2.849-22.452-0.314-53.012 7.322-88.367 9.764-45.221 27.084-96.086 50.523-149.145 3.241 5.823 6.538 11.644 9.897 17.456 56.671 98.156 122.531 183.614 185.446 240.64 60.323 54.675 104.703 71.435 136.452 71.435 15.909 0 28.647-4.21 38.626-9.973 13.893-8.021 32.106-25.019 39.958-60.44 5.095-22.949 5.418-51.371 0.971-84.47-8.48-63.163-33.43-140.121-72.158-222.562-6.639-14.129-23.475-20.204-37.604-13.569-14.126 6.635-20.197 23.471-13.558 37.602 35.781 76.177 59.683 149.357 67.3 206.052 4.645 34.604 3.983 78.527-13.173 88.434-7.271 4.197-20.049 2.823-35.978-3.861-20.869-8.765-46.069-26.237-72.873-50.531-58.688-53.189-120.64-133.811-174.455-227.02-10.074-17.451-19.625-34.929-28.607-52.317 8.982-17.393 18.534-34.87 28.607-52.323 2.196-3.807 4.41-7.584 6.636-11.342 27.282-1.838 55.392-2.791 83.987-2.791 107.628 0 208.429 13.347 283.834 37.578 70.136 22.535 101.529 49.923 101.529 67.072 0 8.347-7.509 18.671-21.145 29.074-17.868 13.636-45.385 26.677-79.568 37.729-14.849 4.802-23.001 20.733-18.199 35.586 4.809 14.85 20.738 23.003 35.584 18.196 115.593-37.36 139.858-86.201 139.858-120.585C953.439 444.791 731.138 389.427 511.546 389.427L511.546 389.427zM511.542 310.518"
                fill="#b9b9b9"
                p-id="11840"
              ></path>
            </svg></div
        ></el-input>
      </el-form-item>
      <el-form-item v-show="!LoginStatus" prop="email">
        <el-input
          class="custom-input"
          v-model="ruleForm.email"
          placeholder="请输入邮箱"
        >
          <div slot="prefix">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M4 4C2.34315 4 1 5.34315 1 7V17C1 18.6569 2.34315 20 4 20H20C21.6569 20 23 18.6569 23 17V7C23 5.34315 21.6569 4 20 4H4ZM12 12L3.5 7H20.5L12 12Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </el-input>
      </el-form-item>
      <el-form-item v-show="!LoginStatus" prop="email_code" class="checkEmail">
        <el-input
          v-model="ruleForm.email_code"
          style="width:78%"
          class="custom-input"
          placeholder="请输入验证码"
        >
          <div slot="prefix">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.1 18L4.5032 20.1702C4.24999 21.0909 4.94281 22 5.89773 22C6.54881 22 7.11964 21.565 7.29227 20.9372L8.1 18H12.1L11.5032 20.1702C11.25 21.0909 11.9428 22 12.8977 22C13.5488 22 14.1196 21.565 14.2923 20.9372L15.1 18H19.5C20.3284 18 21 17.3284 21 16.5C21 15.6716 20.3284 15 19.5 15H15.925L17.575 9H20.5C21.3284 9 22 8.32843 22 7.5C22 6.67157 21.3284 6 20.5 6H18.4L18.9968 3.8298C19.25 2.90906 18.5572 2 17.6023 2C16.9512 2 16.3804 2.43504 16.2077 3.06281L15.4 6H11.4L11.9968 3.8298C12.25 2.90906 11.5572 2 10.6023 2C9.95119 2 9.38036 2.43504 9.20773 3.06281L8.4 6H4.5C3.67157 6 3 6.67157 3 7.5C3 8.32843 3.67157 9 4.5 9H7.575L5.925 15H3.5C2.67157 15 2 15.6716 2 16.5C2 17.3284 2.67157 18 3.5 18H5.1ZM8.925 15L10.575 9H14.575L12.925 15H8.925Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </el-input>
        <SendBtn
          @custom-click="SendEmail"
          style="margin-left:10px"
          :loading="loading"
          :isDisabled="isAllowSendCode"
          ><div style="width:1.3rem;text-align:center" slot="content">
            {{ isAllowSendCode ? ` ${SendEmailCodeTime}` + '秒' : '' }}
          </div></SendBtn
        >
      </el-form-item>
      <el-form-item
        v-if="!LoginStatus"
        :prop="department_id"
        style="width:100%"
      >
        <DepartmentCascader />
      </el-form-item>
      <el-form-item>
        <div v-if="!LoginStatus" class="option-container">
          <span>已有账号?</span>&nbsp;
          <a href="#" class="options-content" @click="ShiftStatus">登录</a>
        </div>
      </el-form-item>
      <el-form-item class="login-click">
        <el-button class="LoginBtn" @click="LoginOrRegister">{{
          LoginStatus ? '登录' : '注册'
        }}</el-button>
      </el-form-item>
      <el-form-item :class="LoginStatus ? 'login-Options' : 'register-Options'">
        <div v-if="LoginStatus" class="option-container">
          <span>如果还没有账号请先</span>&nbsp;
          <a class="options-content" @click="ShiftStatus" href="#">注册账号</a>
        </div>

        <div class="option-container-right" v-if="LoginStatus">
          无法登录?&nbsp;
          <a href="#" @click="forgetPassword" class="options-content"
            >忘记密码?</a
          >
        </div>
      </el-form-item>
    </el-form>
    <el-form
      v-else
      :model="ruleForm"
      ref="ruleForm"
      :rules="registerRules"
      label-width="0px"
      class="login-form"
    >
      <h3 class="login-title">
        找回密码
        <h4 class="pwd-title">设置新密码</h4>
      </h3>

      <el-form-item prop="username">
        <el-input
          class="custom-input"
          v-model="ruleForm.username"
          placeholder="请输入用户名"
        >
          <div slot="prefix">
            <svg
              t="1687856604893"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2995"
              width="20px"
              height="20px"
            >
              <path
                d="M928 893.5C928 724 808.2 580 642.8 529.3c64.3-42.3 106.9-114.7 106.9-196.9C749.7 202 643.1 96 512 96S274.3 202 274.3 332.3c0 82.2 42.6 154.6 106.9 196.9C215.8 580 96 723.9 96 893.5V928h832v-34-0.5z"
                fill="#b9b9b9"
                p-id="2996"
              ></path>
            </svg></div
        ></el-input>
      </el-form-item>
      <el-form-item prop="newpassword">
        <el-input
          class="custom-input"
          type="password"
          v-model="ruleForm.newpassword"
          placeholder="请输入新密码"
        >
          <div slot="prefix">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M23 8.5C23 12.6421 19.6421 16 15.5 16C14.0696 16 12.7327 15.5996 11.5953 14.9047L11 15.5V19H7V23H2V19L8.91221 12.0878C8.33057 11.0221 8 9.79964 8 8.5C8 4.35786 11.3579 1 15.5 1C19.6421 1 23 4.35786 23 8.5ZM19 7.5C19 6.11929 17.8807 5 16.5 5C15.1193 5 14 6.11929 14 7.5C14 8.88071 15.1193 10 16.5 10C17.8807 10 19 8.88071 19 7.5Z"
                fill="currentColor"
              ></path>
            </svg></div
        ></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input
          class="custom-input"
          v-model="ruleForm.email"
          placeholder="请输入邮箱"
        >
          <div slot="prefix">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M4 4C2.34315 4 1 5.34315 1 7V17C1 18.6569 2.34315 20 4 20H20C21.6569 20 23 18.6569 23 17V7C23 5.34315 21.6569 4 20 4H4ZM12 12L3.5 7H20.5L12 12Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </el-input>
      </el-form-item>
      <el-form-item prop="email_code" class="checkEmail">
        <el-input
          v-model="ruleForm.email_code"
          style="width:78%"
          class="custom-input"
          placeholder="请输入验证码"
        >
          <div slot="prefix">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              focusable="false"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.1 18L4.5032 20.1702C4.24999 21.0909 4.94281 22 5.89773 22C6.54881 22 7.11964 21.565 7.29227 20.9372L8.1 18H12.1L11.5032 20.1702C11.25 21.0909 11.9428 22 12.8977 22C13.5488 22 14.1196 21.565 14.2923 20.9372L15.1 18H19.5C20.3284 18 21 17.3284 21 16.5C21 15.6716 20.3284 15 19.5 15H15.925L17.575 9H20.5C21.3284 9 22 8.32843 22 7.5C22 6.67157 21.3284 6 20.5 6H18.4L18.9968 3.8298C19.25 2.90906 18.5572 2 17.6023 2C16.9512 2 16.3804 2.43504 16.2077 3.06281L15.4 6H11.4L11.9968 3.8298C12.25 2.90906 11.5572 2 10.6023 2C9.95119 2 9.38036 2.43504 9.20773 3.06281L8.4 6H4.5C3.67157 6 3 6.67157 3 7.5C3 8.32843 3.67157 9 4.5 9H7.575L5.925 15H3.5C2.67157 15 2 15.6716 2 16.5C2 17.3284 2.67157 18 3.5 18H5.1ZM8.925 15L10.575 9H14.575L12.925 15H8.925Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </el-input>
        <SendBtn
          @custom-click="SendEmail"
          style="margin-left:10px"
          :loading="loading"
          :isDisabled="isAllowSendCode"
          ><div style="width:1.3rem;text-align:center" slot="content">
            {{ isAllowSendCode ? ` ${SendEmailCodeTime}` + '秒' : '' }}
          </div></SendBtn
        >
      </el-form-item>
      <el-form-item class="login-click">
        <el-button class="LoginBtn" @click="findPassword">下一步</el-button>
      </el-form-item>
      <el-form-item :class="LoginStatus ? 'login-Options' : 'register-Options'">
        <div style="float:right;color:#77797b;" v-if="LoginStatus">
          已有账号?&nbsp;
          <router-link
            href="#"
            @click="findPassword"
            class="options-content"
            to="/login"
            >点击登录</router-link
          >
        </div>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { encryptData } from '@/utils/encrypt'
import { isEmail, isUser, isPassword } from '@/utils/validate'
import LoadDepartmentList from '@/mock/department'
import DepartmentCascader from '@/components/Tools/DepartmentCascader'
import axios from 'axios'
import SendBtn from '@/components/Tools/SendBtn.vue'
import {
  setActiveIndex,
  getActiveIndex,
  removeActiveIndex
} from '@/utils/Storage'
export default {
  props: {
    // 是否为登录界面
    isLogin: {
      type: Boolean,
      default: true
    },
    isPwd: {
      type: Boolean,
      default: false
    }
  },
  components: {
    DepartmentCascader,
    SendBtn
  },
  data() {
    let id = 0
    // 自定义校验
    let validateEmail = (rule, value, callback) => {
      if (!isEmail(value)) {
        callback(new Error('邮箱格式错误'))
      } else {
        callback()
      }
    }
    let validateUser = (rule, value, callback) => {
      if (!isUser(value)) {
        callback(new Error('只能由字母、数字组成，1-13位'))
      } else {
        callback()
      }
    }
    let validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('至少包含字母、数字组成，5-13位'))
      } else {
        callback()
      }
    }
    const validateRealPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      LoginStatus: true, // 登录状态
      // 用户/注册表单数据
      ruleForm: {
        username: '',
        password: '',
        departmentId: '',
        RealPassword: '',
        email: '',
        referral_by_code: '',
        email_code: '',
        department_id: '',
        newpassword: ''
      },
      loading: false,
      // 密码拷贝
      originPassword: '',
      // 注册校验规则和登录校验规则
      loginRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { validator: validateUser, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ]
      },
      registerRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { validator: validateUser, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        newpassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        RealPassword: [
          { required: true, message: '重复密码不能为空', trigger: 'blur' },
          { validator: validateRealPassword, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ]
      },
      // 是否允许重新发起验证码
      isAllowSendCode: false,
      // 发送验证码刷新时间
      SendEmailCodeTime: 60
    }
  },
  computed: {
    openingModuleList() {
      return this.$store.state.paid.openingModuleList
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      // 刷新表单
      this.ruleForm = {}
      // 获取登录/注册状态
      this.LoginStatus = this.isLogin
      this.getPublicKey()
      this.getCurrentCity()
    })
  },
  methods: {
    // 登录/注册功能
    LoginOrRegister() {
      this.getPublicKey().then(() => {
        this.$refs.ruleForm.validate(async valid => {
          try {
            if (valid) {
              // 密码字段拷贝
              this.loading = true
              let originPassword = this.ruleForm.password
              // 密码字段加密
              let pwd = encryptData(this.ruleForm.password)
              console.log('pwd', pwd)
              console.log('password', originPassword)
              // 整理请求体
              let response = this.ruleForm
              console.log('users', response)
              response.password = pwd

              // 如果是登录
              if (this.LoginStatus) {
                response = this.$qs.stringify(response)
                // 还原密码字段
                this.ruleForm.password = originPassword
                const res = await this.$store.dispatch('user/Login', response)
                console.log('result', res)
                this.$message({
                  type: res == 'success' ? 'success' : 'error',
                  message: res == 'success' ? '登录成功' : res
                })
                if (res == 'success')
                  this.$store.dispatch('user/GetUserInfo').then(() => {
                    setActiveIndex(1)
                    this.$router.push('/article')
                    this.loading = false
                  })
              }
              // 如果是注册
              else {
                // 获取部门id
                this.ruleForm.department_id = this.$store.state.user.departmentId
                // console.log("DEPARTMENTID",this.ruleForm.department_id)
                // 是否选择了部门
                if (this.ruleForm.department_id) {
                  response.department_id = this.ruleForm.department_id

                  response = this.$qs.stringify(response)
                  // 还原密码字段
                  this.ruleForm.password = originPassword
                  console.log(this.ruleForm)
                  // 发起请求
                  console.log('datas', this.ruleForm)
                  const res = await this.$store.dispatch(
                    'user/Register',
                    response
                  )
                  console.log('result', res)
                  this.$message({
                    type: res == 'success' ? 'success' : 'error',
                    message: res == 'success' ? '注册成功,请等待审核' : res
                  })
                  if (res == 'success') this.$router.push('/login')
                } else {
                  return this.$message.error('请选择你的部门')
                }
              }
            } else {
              this.loading = false

              this.$message.error('请确认你所输入的字段格式')
            }
          } catch (error) {
          } finally {
            this.loading = false
          }
        })
      })
    },

    // 获取公钥
    async getPublicKey() {
      const res = await this.$API.user.getPublicKey()
      // 存储PublicKey
      // console.log("publicKey", res.data.public_key)
      if (res.status == 200) {
        this.$store.dispatch('user/setPublicKey', res.data.public_key)
      }
    },
    // 转换登录/注册界面
    ShiftStatus() {
      this.$router.push(this.LoginStatus ? '/register' : '/login')
    },
    // 发送邮箱
    async SendEmail() {
      if (!this.ruleForm.email) return this.$message.warning('邮箱不能为空')
      let datas = {
        email: this.ruleForm.email
      }
      const res = await this.$API.user.SendVerificationCode(
        this.$qs.stringify(datas)
      )
      console.log(res)
      if (res.status == 200) {
        this.$message.success('发送成功')
        this.isAllowSendCode = true
        this.startCountDown()
      }
    },
    startCountDown() {
      this.SendEmailCodeTime = 60 // 重置时间
      const timer = setInterval(() => {
        if (this.SendEmailCodeTime > 0) {
          this.SendEmailCodeTime--
        } else {
          this.isAllowSendCode = false
          clearInterval(timer) // 倒计时结束，清除定时器
        }
      }, 1000) // 每秒更新倒计时秒数
    },
    // 忘记密码功能
    forgetPassword() {
      this.$router.push('/forgetPassword')
    },
    // 找回密码
    findPassword() {
      try {
        this.$refs.ruleForm.validate(async valid => {
          if (!valid) return this.$message.warning('字段不全')
          // 重新获取密钥
          this.loading = true
          let originPassword = this.ruleForm.newpassword
          // 密码字段加密
          let pwd = encryptData(this.ruleForm.newpassword)
          let response = this.ruleForm
          response.newpassword = pwd
          let datas = this.$qs.stringify(response)
          const res = await this.$API.user.forgetPassword(datas)
          if (res.status == 200) {
            this.$message.success('修改密码成功')
            // 回到登录界面
            this.$router.push('/login')
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false

          this.ruleForm.newpassword = originPassword
        })
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 350px;
  border-radius: 4px;
  /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;   */
  padding: 20px;
}
.login-title {
  font-size: 24px;
  font-weight: bold;
  width: 100%;
  /* font-family: 'Permanent Marker', cursive;   */

  display: flex;
  /* justify-content: center; */
  margin-bottom: 40px;
}
.login-click {
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}
.checkEmail {
  width: 100%;
  display: flex;
}
.checkEmail >>> .el-form-item__content {
  width: 100%;
  display: flex;
}
.login-Options {
  width: 100%;
  font-size: 13px;
  float: left;
}
.option-container {
  float: left;
  width: 50%;
  color: #77797b;
}
.options-content {
  font-weight: 600;
  color: #1884fa;
  font-size: 14px;
}
.options-content:hover {
  color: #1c73da;
}
.register-Options {
  width: 100%;
  font-size: 13px;
  display: flex;
  justify-content: center;
}
/* 定制登录输入框 */
.custom-input {
  color: #979899;
}
.custom-input >>> .el-input__inner {
  background-color: #f4f5f5;
}
.custom-input >>> .el-input__prefix {
  position: absolute;
  top: 5px;
}
.custom-input >>> .el-input__inner::placeholder {
  color: #8d8f91;
}
.login-click >>> .el-form-item__content {
  width: 100%;
}
.LoginBtn {
  background-color: #0064fa;
  color: #fff;
  height: 0.8rem;
  width: 100%;
  padding: 4px 8px;
  line-height: 0.4em;
  text-align: center;
}
.LoginBtn:hover {
  background-color: #0062d6;
}
.pwd-title {
  font-size: 18px;
  color: #77797b;
  margin-left: 32px;
  font-weight: 600;
  line-height: 24px;
}
.option-container-right {
  float: right;
  color: #77797b;
}
/* PC 端样式 */
@media screen and (min-width: 768px) {
  .login-container {
    width: 500px; /* 根据需要调整宽度 */
  }
  /* 其他PC端样式设置 */
}
/* 移动端样式 */
@media screen and (max-width: 767px) {
  .login-container {
    width: 85%; /* 设置为100%以适应移动端屏幕宽度 */
    margin-top: 0.8rem;
  }
  .login-Options {
    width: 100%;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .option-container {
    width: 100%;
    text-align: center;
    color: #77797b;
  }
  .option-container-right {
    width: 100%;
    text-align: center;
    color: #77797b;
  }
  .custom-input >>> .el-input__inner::placeholder {
    color: #8d8f91;
    font-size: 12px;
  }

  /* 其他移动端样式设置 */
}
</style>